<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>仿微博发布效果</title>
	<style type="text/css">
		   .comwrap{
			    margin:0;
			    padding: 0;
				width:100%;
				height: 100%;
				margin:0 auto;
				box-shadow: 10px 10px 30px #ccc;
				border-radius: 2px;
				padding: 10px;
				position: relative;
		}
		.comwrap ul{
			width:750px;
			height: 100%;
 			position: absolute;
			bottom: 0;
			/* overflow-x: hidden;
			overflow-y: scroll; */

 		}
		.comwrap ul li{
			width:750px;
 			border-bottom: 1px  dotted #ccc;
			list-style:none;
			line-height: 57px;
			font-size: 14px;
			color:#606060;
			overflow: hidden;
			/* filter: alpha("opacity:0"); */
			/* opacity: 0; */

		}
		.comwrap ul li span{
			float: right;
			margin-right: 30px;
		}
 		.comwrap ul li span a{
 			font-size: 14px;
 			color:#990000;
 			text-decoration: none;
 			margin-left: 10px;
 		}
 		.comwrap ul li span a:hover{
 			color:red;
 			text-decoration: underline;
 		}
	</style>
<!-- 引入Vue -->
<script src="js/vue.min.js"></script>
<!-- 引入axios -->
<script type="text/javascript"
	src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
</head>
<body>
<div class="comwrap">
	<ul>
		<li style="height: 57px;" v-for="mym in myComments">{{mym.comment}}<span>{{mym.time}}<a
				href="javascript:;" @click="scmyc(mym.cid)">删除</a></span></li>
	</ul>
</div>
<script type="text/javascript">
	var v = new Vue({
		el : ".comwrap",
		data : {
			myComments : [],
		},
		created(){
			axios.post("../comment/queryMyComment.s").then(res=>{
				this.myComments = res.data;
			});
		},
		methods : {
			scmyc(cid){
				var params = new URLSearchParams();
				params.append("cid",cid);
				axios.post("../comment/delMyComment.s",params);
				axios.post("../comment/queryMyComment.s").then(res=>{
					this.myComments = res.data;
				});
			}
		}
	})
</script>
<!-- <script>
	window.onload=function()
		{
			var oWrap=document.getElementsByClassName("comwrap")[0];
			var oTextarea=oWrap.getElementsByTagName("textarea")[0];
			var oBtn=oWrap.getElementsByTagName("input")[0];
			var oUl=oWrap.getElementsByTagName("ul")[0];
			var errMsg=oWrap.getElementsByClassName("errmsg")[0];
			var oA=document.getElementsByTagName("a");
			//console.log(oA);
			var t=new Date();
			var Year=t.getFullYear();
			var Month=t.getMonth()+1;
			var Day=t.getDate();
			var Hours=t.getHours();
			var Minutes=t.getMinutes();
			var Scondes=t.getSeconds();
			var timers=toString(Year)+"年"+toString(Month)+"月"+toString(Day)+"日"+toString(Hours)+":"+toString(Minutes)+":"+toString(Scondes);//将获取到的日期对象拼接。
			//console.log(timers);

			function toString(n)//数字转字符串
			{
				if(n<9)
				{
					n="0"+n;
				}
				else
				{
					n=""+n;
				}
				return n;
			};

			oBtn.onclick=function()
			{
				if(oTextarea.value=="")
				{
					startMove(errMsg,{opacity:100});
					//console.log(errMsg.style.opacity)
					oTextarea.select();
				}
				else
				{
				var aLi=document.createElement("li");
				var aSpan=document.createElement("span");
 				//console.log(aLi);
				//console.log(aSpan);
				//oUl.appendChild(aLi);
				//aLi.appendChild(aSpan);
				aLi.innerHTML=oTextarea.value;
				aSpan.innerHTML=timers+"<a href='javascript:;' title='删除这条信息'>删除</a>";
 				//aSpan.innerHTML="<a href='javascript:;'>删除</a>"
				if(oUl.children.length>0)
				{
					oUl.insertBefore(aLi,oUl.children[0]);
					aLi.appendChild(aSpan);
					oTextarea.value="";
 				}
				else
				{
					oUl.appendChild(aLi);
					aLi.appendChild(aSpan);
					oTextarea.value="";
 				};
				var aLiHeight=parseInt(getStyle(aLi,"height"));
				//console.log(aLiHeight);
					aLi.style.height="0";
					startMove(aLi,{height:aLiHeight},function(){
						startMove(aLi,{opacity:100});
					});
				delLi();//添加数据后加载删除模块	
			}
			};
 			
 			function delLi()
 			{
 				for(var i=0;i<oA.length;i++)
 				{
 					oA[i].onclick=function()
 					{	
 						liNode=this.parentNode.parentNode//获取到当前A标签的父节点，也就是LI
 						var aLiHeight=parseInt(getStyle(liNode,"height"))+1;
 						 //console.log(aLiHeight);
 						 //链式运动操作：先进行透明化，再进行高度变小，最后删除DOM元素
 						 startMove(liNode,{opacity:0},function(){
 						 	startMove(liNode,{height:0},function(){
 						 		oUl.removeChild(liNode);
 						 	});
 						 });
 					}
 				}
 			}
  		}; 

		//运动框架
		 function startMove(obj,json,endFn){
		 	clearInterval(obj.timer);
		 	obj.timer=setInterval(
		 		function(){

		 			var iStop=true;
		 			for(var curr in json)
		 			{
		 				var oNumber=0;
		 				if(curr=="opacity")
		 				{
		 					oNumber=Math.round(parseFloat(getStyle(obj,curr))*100);
		 				}
		 				else
		 				{
		 					oNumber=parseInt(getStyle(obj,curr));
		 				}
		 				var speed=(json[curr]-oNumber)/6;
		 					speed=speed>0?Math.ceil(speed):Math.floor(speed);
		 				if(oNumber!=json[curr])
		 				iStop=false;
		 				if(curr=="opacity")
		 				{
		 					obj.style.filter="alpha(opacity:"+(oNumber+speed)+")";
		 					obj.style.opacity=(oNumber+speed)/100;
		 				}	
		 				else
		 				{
		 					obj.style[curr]=oNumber+speed+"px";
		 				}
		 			};
		 			if(iStop)
		 			{
		 				clearInterval(obj.timer);
		 				if(endFn)endFn();
		 			}
		 	},30);
		 };

		//获取非行间样式
		function getStyle(obj,name)
		{
			if(obj.currentStyle)
			{
				obj=currentStyle[name];
			}
			else
			{
				obj=getComputedStyle(obj,false)[name];
			}
			return obj;
		};
	</script> -->
</body>
</html>